<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="keywords" content="pinpin社保" />
	<meta name="description" content="pinpin社保" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>社保运营后台-热门问题配置</title>
	<%@ include file="/WEB-INF/jsp/common/common.jsp" %>
</head>
<body>
	<div id="wrapper">
        <%@ include file="/WEB-INF/jsp/common/menu.jsp" %>
        <div id="page-wrapper">
        	<div class="row">
                <div class="col-lg-12">
                    <!-- 路径导航 -->
                    <ol class="breadcrumb">
				      <li>社保后台</li>
				      <li class="active">热门问题配置</li>
				    </ol>
                </div>
            </div>
            <div class="row">
            	<div class="col-lg-12">
            		<div class="panel panel-default">
            			<div class="panel-body">
            				<form id="noServicerTipForm" method="post" class="form-horizontal">
								<div class="form-group">
						             <label class="col-sm-2 control-label" style="width:120px;">没客服提示：</label>
						             <div class="col-sm-8">
						             	<input type="text" id="noServicerTip" name="noServicerTip" value="${noServicerTip }" placeholder="请填写没客服提示" class="form-control"/>
						             </div>
						             <div class="col-sm-2">
						             	<button type="button" class="btn btn-primary btn-sm" onclick="javascript:updateNoServicerTip();">确定</button>
						             </div>
						        </div>
							</form>
            				<form id="broadcastTipForm" method="post" class="form-horizontal">
								<div class="form-group">
						             <label class="col-sm-2 control-label" style="width:120px;">广播内容：</label>
						             <div class="col-sm-8">
						             	<input type="text" id="broadcastTip" name="broadcastTip" value="${broadcastTip}" placeholder="请填写广播内容" class="form-control"/>
						             </div>
						             <div class="col-sm-2">
						             	<button type="button" class="btn btn-primary btn-sm" onclick="javascript:updateBroadcastTip();">确定</button>
						             </div>
						        </div>
							</form>
            			</div>
            			<hr/>
            			<div class="panel-body">
        			    	<div class="form-inline dt-bootstrap no-footer">
        			    		<form action="${list_uri}" id="hotTopicForm" class="form-check">
        			    			<select class="form-control" id="type" name="type">
                                       	<option value="-1">--请选择类型--</option>
                                       	<c:forEach var="type" items="${types }">
   			    							<option value="${type.num }" <c:if test="${htParam.type eq type.num }">selected</c:if>>${type.name }</option>
   			    						</c:forEach>
                                    </select>
        			    			<select class="form-control" id="disabled" name="disabled">
                                       	<option value="-1">--请选择启用标识--</option>
                                       	<c:forEach var="disabled" items="${disableds }">
   			    							<option value="${disabled.num }" <c:if test="${htParam.disabled eq disabled.num }">selected</c:if>>${disabled.name }</option>
   			    						</c:forEach>
                                    </select>
                                    <button type="submit" class="btn btn-primary">查 询</button>
        			    			<button type="button" onclick="resetCond();" class="btn btn-primary">重置</button>
        			    		</form>
        			    		<div class="row">
                                    <div class="col-lg-11  toggle_vis">
                                    	<button type="button" onclick="toUpdateHotTopic(0);" class="btn btn-primary btn-sm showcol">添加热门问题</button>
                                    </div>
        			    	    </div>
        			    		<!-- 表格列表 -->
        			    		<div class="row">
        			    			<div class="col-sm-12">
        			    				<table class="table table-striped table-bordered table-hover no-footer" role="grid">
        			    					<thead>
        			    						<tr>
        			    							<th width="8%">类型</th>
        			    							<th width="5%">排序(降序)</th>
        			    							<th width="20%">问题</th>
                                                    <th width="20%">回答</th>
                                                    <th width="8%">用户</th>
                                                    <th width="14%">创建时间</th>
                                                    <th width="5%">启用标识</th>
                                                    <th width="18%">操作</th>
                                                </tr>
        			    					</thead>
        			    					<tbody>
        			    					<c:forEach items="${hotTopics }" var="hotTopic">
        			    						<tr role="row" <c:if test="${hotTopic.disabled.num == 2}">class="warning"</c:if>>
        			    							<td>${hotTopic.type.name }</td>
        			    							<td>${hotTopic.sort }</td>
        			    							<td  id="hotTopic_${hotTopic.id }">${hotTopic.topic }</td>
        			    							<td>${hotTopic.answer }</td>
        			    							<td>${hotTopic.optUser }</td>
        			    							<td><fmt:formatDate value="${hotTopic.create_time }" pattern="yyyy-MM-dd HH:mm:ss"/></td>
        			    							<td>${hotTopic.disabled.name }</td>
        			    							<td>
        			    								<c:if test="${hotTopic.disabled.num == 1}">
        			    									<button onclick="javascript:toDisabledHotTopic('${hotTopic.id }', 2);" class="btn btn-danger btn-sm">禁用</button>
        			    								</c:if>
        			    								<c:if test="${hotTopic.disabled.num == 2}">
        			    									<button onclick="javascript:toDisabledHotTopic('${hotTopic.id }', 1);" class="btn btn-primary btn-sm">启用</button>
        			    								</c:if>
        			    								<button onclick="javascript:toUpdateHotTopic('${hotTopic.id }');" class="btn btn-primary btn-sm">编辑</button>
        			    								<button onclick="javascript:toDelHotTopic('${hotTopic.id }');" class="btn btn-primary btn-sm">删除</button>
        			    							</td>
        			    						</tr>
        			    					</c:forEach>
        			    					</tbody>
        			    				</table>
        			    			</div>
        			    		</div>
        			    	</div>
            			</div>
            		</div>
            	</div>
            </div>
        </div>
	</div>
	<div id="hotTopicPannel" style="display:none;width:700px">
		<form id="hotTopicUpdateForm" method="post" class="form-horizontal">
			<input type="hidden" id="id" name="id"/>
			<div id="typeDiv" class="form-group form-inline">
	             <label class="col-sm-2 control-label" style="width:100px;">类型：</label>
	             <div class="col-sm-4">
	             	<select class="form-control" id="type" name="type">
	             		<c:forEach var="type" items="${types }">
   			    			<option value="${type.num }">${type.name }</option>
   			    		</c:forEach>
	             	</select>
	             </div>
	        </div>
			<div class="form-group form-inline">
	             <label class="col-sm-2 control-label" style="width:100px;">问题：</label>
	             <div class="col-sm-4">
	             	<textarea id="topic" name="topic" placeholder="请输入问题（最好不要超过20个字，最长不能超过250个字）" cols="72" rows="5" class="form-control"></textarea><br/>
	             </div>
	        </div>
	        <div class="form-group form-inline">
	             <label class="col-sm-2 control-label" style="width:100px;">回答：</label>
	             <div class="col-sm-4">
	             	<textarea id="answer" name="answer" placeholder="填输入回答（最长不能超过1000个字）" cols="72" rows="5" class="form-control"></textarea><br/>
	             </div>
	        </div>
	        <div class="form-group form-inline">
	             <label class="col-sm-2 control-label" style="width:100px;">排序：</label>
	             <div class="col-sm-4">
	             	<input type="text" id="sort" name="sort" placeholder="请输入问题排序(降序)" class="form-control" style="width:200px;" />
	             </div>
	        </div>
			<button type="button" class="btn btn-primary btn-sm" onclick="javascript:updateHotTopic();">确定</button>
		</form>
	</div>
    <script language="javascript">
    	function toUpdateHotTopic(id){
    		JSONSubmit("${get_uri}", function(result){
    			if (result.code == 200) {
	   				  var hotTopic = result.data;
	   				  $("#id").val(hotTopic.id);
	   				  $("#sort").val(hotTopic.sort);
	   				  $("#topic").text(hotTopic.topic);
	   				  $("#answer").text(hotTopic.answer);
	   				  if(hotTopic.id>0) {
		   				  $("#typeDiv").hide();
		   			  } else {
		   				  $("#typeDiv").show();
			   		  }
	   				  var content=document.getElementById("hotTopicPannel");
	   				  var d=dialog({title:'热门问题',
	   						content:content,
	   						follow:document.getElementById("hotTopic_"+id),
	   						quickClose:true}).show();
   			   } else {
	   				showInfo(result.msg);
   			   }
    		}, "json", {id : id});
    	}
    	
    	function updateHotTopic() {
    		var data = CollectData($("#hotTopicUpdateForm"));
    		JSONSubmit("${edit_uri}", function(result) {
    			if(result.code == 200) {
    				$("#hotTopicForm").submit();
    			} else {
	   				showInfo(result.msg);
    			}
    		}, "json", data);
    	}
    	
    	function toDelHotTopic(id) {
    		showConfirm("确定删除热门问题?",function(){
    			JSONSubmit("${delete_uri}", function(result){
        			if (result.code == 200) {
        				$("#hotTopicForm").submit();
       			   } else {
    	   				showInfo(result.msg);
       			   }
        		}, "json", {id : id});
    		});
    	}
    	
    	function toDisabledHotTopic(id, disabled) {
    		showConfirm("确定"+(disabled==1?"启用":"禁用")+"热门问题?",function(){
    			JSONSubmit("${disabled_uri}", function(result){
        			if (result.code == 200) {
        				$("#hotTopicForm").submit();
       			   } else {
    	   				showInfo(result.msg);
       			   }
        		}, "json", {id : id, disabled:disabled});
    		});
    	}
    	
    	function resetCond() {
    		$("#hotTopicForm").find("input[type='text']").val("");
    		$("#hotTopicForm").find("select").val("-1");
    	}
    	
    	function updateNoServicerTip() {
    		JSONSubmit("${noservicer_uri}", function(result){
    			if (result.code == 200) {
    				showInfo("更新成功!");
   			   } else {
	   				showInfo(result.msg);
   			   }
    		}, "json", {noServicerTip : $("#noServicerTip").val()});
    	}
    	
    	function updateBroadcastTip() {
    		JSONSubmit("${broadcast_uri}", function(result){
    			if (result.code == 200) {
    				showInfo("更新成功!");
   			   } else {
	   				showInfo(result.msg);
   			   }
    		}, "json", {broadcastTip : $("#broadcastTip").val()});
    	}
    </script>
</body>
</html>